import React, { useState, useEffect } from "react";
import { Modal, Table } from "antd";
import { modalPropsType } from "@/constants/types";
import { paymentDetail } from "../../services";


const WriteOffRecord = ({title, onCancel, visible, currentRow}: modalPropsType) => {
  const [dataSource, setDataSource] = useState([]);

  const search = async () => {
    const res = await paymentDetail({id: currentRow?.id});
    setDataSource(res?.writeOffList || []);
  }

  const columns = [
    {
      title: "账单号",
      dataIndex: "billCode"
    },
    {
      title: "账单金额/元",
      dataIndex: "amount"
    },
    {
      title: "核销日期",
      dataIndex: "writeOffTime"
    },
  ];

  useEffect(() => {
    if (currentRow?.id){
      search();
    } else {
      setDataSource([]);
    }
  }, [currentRow?.id])

  return (
    <Modal
      maskClosable={false}
      title={title}
      onCancel={onCancel}
      footer={false}
      open={visible}
      width="700px"
    >
      <Table 
        rowKey="id"
        columns={columns}
        dataSource={dataSource}
      />
    </Modal>
  );
}
export default WriteOffRecord;